<template>
	<view>
		<!-- 顶部 -->
		<view class="evaluate_head">
			<image class="headBg" src="@/static/icons/head.png" mode=""></image>
			<view class="headZindexbox">
				<image class="icon" src="@/static/icons/hua@2x.png" mode=""></image>
				<view class="text">提交评价或建议，鼓励技师和平台做得更好～</view>
			</view>
		</view>
		<!-- 评价 -->
		<view class="evearNox">
			<view class="evearHead">
				<view class="label">您对技师满意吗?</view>
				<view class="text">已对技师匿名</view>
			</view>
			<!-- 技师信息 -->
			<view class="userBox">
				<image class="logo"
					:src="userBase.massagistWorkPhoto?userBase.massagistWorkPhoto:'../../static/logo.png'" mode="">
				</image>
				<view class="userContent">
					<view class="username">{{userBase.massagistName?userBase.massagistName:''}}</view>
					<view class="userText">
						{{userBase.endTime?userBase.endTime:''}}完成服务
					</view>
				</view>
			</view>
			<!-- 选择 -->
			<view class="checkBox">
				<view class="checkLabel" v-for="(item,index) in checkList" :key="index" @click="getItem(item,index)"
					:class="item.active?'textActive':''">
					<view class="text">
						<image class="icon" v-if="index==0&&!item.active" src="@/static/icons/icon_ku.png"></image>
						<image class="icon" v-else-if="index==1&&!item.active" src="@/static/icons/icon_xiao.png">
						</image>
						<image class="icon" v-else-if="index==0&&item.active" src="@/static/icons/icon_kued.png">
						</image>
						<image class="icon" v-else-if="index==1&&item.active" src="@/static/icons/icon_xiaoed.png">
						</image>
						{{item.title}}
					</view>
				</view>
			</view>
			<!-- 不满意 -->
			<view v-if="satisfaction=='0'">
				<view class="errorText">“请选择原因，我们会督促技师”</view>
				<view class="labeList">
					<view class="label" v-for="(item,index) in dissatisLabelList" @click="getLabelItem(item,index,0)"
						:class="item.actived?'actived':''">{{item.title}}</view>
				</view>
				<view class="feekContent">
					<view class="feekText">
						<uv-textarea class="feekTexts" :customStyle="customStyle" v-model="evealBase.explain"
							maxlength="100" border="0" placeholder="您的反馈会督促我们做的更好" height="85"></uv-textarea>
					</view>
					<view class="z-lists z-bottom">
						<view class="list-value" style="position: relative;">

						</view>
						<view class="moreNumber">
							<view class="text">{{evealBase.explain.length}}</view>/100
						</view>
					</view>
				</view>
			</view>

			<!-- end -->
			<!-- 满意 -->
			<view class="labeList" v-else-if="satisfaction=='1'">
				<view class="label" v-for="(item,index) in satisLabelList" @click="getLabelItem(item,index,1)"
					:class="item.actived?'actived':''">{{item.title}}</view>
			</view>
			<!-- end -->
		</view>
		<!-- 评分 -->
		<view class="rateBox" v-if="satisfaction=='0'&&showRate">
			<view class="label mr26">服务评分</view>
			<view class="rate-content"> 
				<!-- #ifdef MP-WEIXIN -->
				<uv-rate class="rates" active-color="#FFBF00" inactive-color="#E9E9E9" gutter="10" size="40rpx" count="3"
				activeIcon="/static/picture/eva_act.png"
				inactiveIcon="/static/picture/eva.png"
					:value="evealBase.score" @change="geSatisRates"></uv-rate>
				<uv-rate class="rates"   inactive-color="#E9E9E9" gutter="10" size="40rpx" count="2" readonly 
				activeIcon="/static/picture/eva_act.png"
				inactiveIcon="/static/picture/eva.png"></uv-rate> 
				<!-- #endif --> 
				<!-- #ifdef H5 -->
				<uv-rate class="rates" active-color="#FFBF00" inactive-color="#E9E9E9" gutter="10" size="40rpx" count="3"
				activeIcon="../../static/picture/eva_act.png"
				inactiveIcon="../../static/picture/eva.png"
					:value="evealBase.score" @change="geSatisRates"></uv-rate>
				<uv-rate class="rates"   inactive-color="#E9E9E9" gutter="10" size="40rpx" count="2" readonly 
				activeIcon="../../static/picture/eva_act.png"
				inactiveIcon="../../static/picture/eva.png"></uv-rate> 
				<!-- #endif -->  
				<view class="text ml10" v-if="evealBase.score==1">非常差</view>
				<view class="text ml10" v-else-if="evealBase.score==2">差</view>
				<view class="text ml10" v-else-if="evealBase.score==3">一般</view>
				<view class="text ml10" v-else-if="evealBase.score==4">满意</view>
				<view class="text ml10" v-else-if="evealBase.score==5">非常满意</view>
			</view>
		</view>
		<view style="height: 180rpx;" v-if="satisfaction=='0'&&showRate"></view>
		<view class="rateBox" v-if="satisfaction=='1'&&showRate">
			<view class="label mr26">服务评分</view>
			<view class="rate-content"> 
				<!-- #ifdef MP-WEIXIN -->
				<uv-rate class="rates" active-color="#FFBF00" inactive-color="#E9E9E9" gutter="10" size="40rpx" minCount='3'
				activeIcon="/static/picture/eva_act.png"
				inactiveIcon="/static/picture/eva.png"
					:value="evealBase.score" @change="geSatisRates"></uv-rate> 
				<!-- #endif --> 
				<!-- #ifdef H5 -->
				<uv-rate class="rates" active-color="#FFBF00" inactive-color="#E9E9E9" gutter="10" size="40rpx" minCount='3'
				activeIcon="../../static/picture/eva_act.png"
				inactiveIcon="../../static/picture/eva.png"
					:value="evealBase.score" @change="geSatisRates"></uv-rate> 
				<!-- #endif -->  
				<view class="text ml10" v-if="evealBase.score==1">非常差</view>
				<view class="text ml10" v-else-if="evealBase.score==2">差</view>
				<view class="text ml10" v-else-if="evealBase.score==3">一般</view>
				<view class="text ml10" v-else-if="evealBase.score==4">满意</view>
				<view class="text ml10" v-else-if="evealBase.score==5">非常满意</view>
			</view>
		</view>
		<!-- end -->
		<!-- 提交 -->
		<view class="feedBottom">
			<view class="submit" @click="getSubmit">提交评价</view>
		</view>
		<!-- end -->
	</view>
</template>

<script>
	import {
		toast
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	import {
		massagistEvaluate
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				evealBase: {
					score: 0,
					explain: ""
				},
				checkList: [{
					title: "不满意"
				}, {
					title: "满意",
				}],
				customStyle: {
					"backgroundColor": "#F9FAF9"
				},
				showRate: false,
				satisfaction: "",  //0不满意  1满意
				satisLabelList: [{
					title: "性价比高",
				}, {
					title: "服装整洁",
				}, {
					title: "热情礼貌",
				}, {
					title: "手法专业",
				}, {
					title: "服务态度好",
				}, {
					title: "很有耐心",
				}, {
					title: "素质高",
				}, {
					title: "相当专业",
				}, {
					title: "非常棒",
				}],
				dissatisLabelList: [{
					title: "性价比不高",
				}, {
					title: "服务态度不好",
				}, {
					title: "服装不整洁",
				}, {
					title: "手法一般",
				}, {
					title: "耐心不足",
				}, {
					title: "素质不高",
				}, {
					title: "不够专业",
				}],
				userBase: {}
			}
		},
		onLoad(options) {
			if (options) {
				console.error("options", options);
				this.userBase = options;
				this.userBase.massagistWorkPhoto = JSON.parse(decodeURIComponent(options.massagistWorkPhoto)) 
			}
		},
		methods: {
			/**
			 * 选择满意不满意
			 * @param {Object} item
			 * @param {Object} index
			 */
			getItem(item, index) {
				this.satisfaction = index;
				this.evealBase.score = "";
				for (var i in this.checkList) {
					if (index == i) {
						this.checkList[i].active = true;
					} else {
						this.checkList[i].active = false;
					}
				}
				for (var i in this.satisLabelList) {
					this.satisLabelList[i].actived = false;
				}
				for (var j in this.dissatisLabelList) {
					this.dissatisLabelList[j].actived = false;

				}
				this.showRate = false
				this.$forceUpdate()
			},
			// 满意选择评分星级
			geSatisRates(item) { 
				if(this.satisfaction==0){
					item>3?this.evealBase.score = 3 :this.evealBase.score = item 
				}
				if(this.satisfaction==1){
					item<3?this.evealBase.score = 3 :this.evealBase.score = item 
				} 
			},

			/**
			 * 选择满意、不满意标签
			 */
			getLabelItem(item, index, type) {
				var array = [];
				if (type == 0) {
					this.dissatisLabelList[index].actived = !this.dissatisLabelList[index].actived
					for (var i in this.dissatisLabelList) {
						if (this.dissatisLabelList[i].actived) {
							array.push(this.dissatisLabelList[i].title)
						}
					}
				} else {
					this.satisLabelList[index].actived = !this.satisLabelList[index].actived
					for (var i in this.satisLabelList) {
						if (this.satisLabelList[i].actived) {
							array.push(this.satisLabelList[i].title)
						}
					}
				}
				if (array.length != 0) {
					this.showRate = true
				} else {
					this.showRate = false
				}
				this.$forceUpdate()
			},
			// 提交评价
			getSubmit() {
				var tagList = [];
				console.error("是否满意==>", this.satisfaction)
				if (this.satisfaction === "") {
					toast("请选择是否满意！")
					return;
				}
				var param = {
					orderId: this.userBase.id,
					massagistId: this.userBase.massagistId,
				};
				param.satisfaction = this.satisfaction
				param.score = this.evealBase.score

				if (this.evealBase.explain != "") {
					param.explain = this.evealBase.explain
				}
				if (this.satisfaction == "0") {
					for (var i in this.dissatisLabelList) {
						if (this.dissatisLabelList[i].actived) {
							tagList.push(this.dissatisLabelList[i].title)
						}
					}
					param.tagList = tagList
				}
				if (this.satisfaction == "1") {
					for (var i in this.satisLabelList) {
						if (this.satisLabelList[i].actived) {
							tagList.push(this.satisLabelList[i].title)
						}
					}
					param.tagList = tagList
				}

				if (tagList.length === 0) {
					toast("请选择标签！")
					return;
				}
				if (this.evealBase.score === "") {
					toast("请选择评分！")
					return;
				}
				massagistEvaluate(param).then(res => {
					console.error('res', res);
					if(res.code=="200"){
						toast("提交成功")
						setTimeout(()=>{ 
							uni.navigateBack({
								delta:1
							})  
							const pages = getCurrentPages(); //获取页面栈
							const beforePage = pages[pages.length - 2]; //前一个页面
							// #ifdef H5
							beforePage.refresData();
							// #endif
							// #ifndef H5
							beforePage.$vm.refresData();
							// #endif  
						},1000)
					}else{
						toast(res.message)
					}
				}).catch(err => {});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F3F4F6;
	}

	.evaluate_head {
			width: 750rpx;
			height: 76rpx;
			display: flex;
			align-items: center;
			position: relative;
	
			.headBg {
				width: 750rpx;
				height: 76rpx;
			}
	
			.headZindexbox {
				position: absolute;
				z-index: 2;
				display: flex;
				align-items: center;
				// top: 20rpx;
				margin-left: 42rpx;
	
				.icon {
					width: 32rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}
	
				.text {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #FFD000;
				}
			}
		}



	.evearNox {
		width: 726rpx;
		margin: 0 auto;
		background: #FFFFFF;
		margin-top: 16rpx;
		padding-bottom: 20rpx;
		border-radius: 12rpx;

		.feekContent {
			width: 670rpx;
			margin: 0 auto;
			background: #F9FAF9 !important;
			border-radius: 12rpx;

			.list-value {
				// width: 230px;
				color: #333;
				background: #F9FAF9 !important;
				// justify-content: right;
				// text-align: right;
				display: flex;
				align-items: center;
				margin-left: 30rpx;

				// position: absolute;
				// right: 10px;
				.u-upload__wrap__preview__image {
					border: 2rpx solid #E9E9E9 !important;
				}
			}

			.list-icon-right {
				margin-left: 10px;
			}

			.feekText {
				background: #F9FAF9 !important;
				border-top-left-radius: 12rpx;
				padding-top: 30rpx;
				border-top-right-radius: 12rpx;

				color: #B4ABAB !important;

				.feekTexts {
					padding: 0 !important;
					margin-left: 32rpx;
					width: 600rpx;
					color: #B4ABAB !important;
					background: #F9FAF9 !important;
				}

			}

			.z-lists {
				width: 100%;
				display: flex;
				align-items: center;
				position: relative;
				padding: 10px 0px;
				border-radius: 6px;
				background: #F9FAF9 !important;

				.moreNumber {
					position: absolute;
					right: 30rpx;
					bottom: 15rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #A4A4A4;

					.text {
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #303030;
					}
				}

				.z-list-border {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 96%;
					height: 1px;
					border-bottom: 1rpx solid #EFEFEF;
				}

				.uploadBox {
					width: 148rpx;
					height: 148rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;
					border: 2rpx solid #E9E9E9;
				}
			}

		}

		.evearHead {
			width: 670rpx;
			display: flex;
			height: 82rpx;
			margin: 0 auto;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #E6E6E6;

			.label {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.text {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #A4A4A4;
			}
		}

		// 用户信息
		.userBox {
			width: 670rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			background: #FFFFFF;
			margin-top: 26rpx;

			.logo {
				width: 72rpx;
				height: 72rpx;
				margin-right: 14rpx;
			}

			.userContent {
				.username {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-bottom: 15rpx;
				}

				.userText {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
		}

		.errorText {
			font-size: 22rpx;
			width: 670rpx;
			margin: 0 auto;
			text-align: left;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FF0000;
			margin-top: 32rpx;
		}

		.checkBox {
			width: 670rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #FFFFFF;
			margin-top: 40rpx;

			.textActive {
				background: #FFF6E1 !important;
			}

			.checkLabel {
				width: 326rpx;
				display: flex;
				align-items: center;
				height: 76rpx;
				justify-content: center;
				background: #F6F6F6;
				border-radius: 12rpx;

				.text {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
					display: flex;
					align-items: center;

					.icon {
						width: 52rpx;
						height: 52rpx;
						margin-right: 20rpx;
					}


				}
			}
		}

		.labeList {
			width: 670rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			background: #FFFFFF;
			margin-top: 26rpx;

			.label {
				width: auto;
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				background: #F6F6F6;
				color: #9B9B9B;
				padding: 6rpx 20rpx;
				margin-bottom: 24rpx;
				border-radius: 8rpx;
				margin-right: 24rpx;
			}

			.actived {
				background: #FFF6E1 !important;
				color:#AD8539!important;
			}
		}
	}

	// 评分
	.rateBox {
		width: 726rpx;
		height: 106rpx;
		display: flex;
		align-items: center;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-top: 16rpx;

		.label {
			margin-left: 30rpx;
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.rate-content {
			display: flex;
			align-items: center;

			.rates {
				// margin-left: 48rpx;
				// margin-right: 52rpx;
			}

			.text {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #2C2C2C;
			}
		}
	}
	.uv-icon__img img{
		width: 40rpx;
		height: 40rpx;
	}

	// 提交
	.feedBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 3;
		height: 116rpx;
		background: #FFFFFF;

		.submit {
			width: 646rpx;
			height: 88rpx;
			background: #AD8539;
			border-radius: 50rpx;
			font-size: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>